<template>
	<view class="page" :style="{'min-height':h+'px','padding-top':mt+'px'}">
		<c-nav-bar title="租赁车辆"></c-nav-bar>
		<!-- <image :style="{'top':mt+'px'}" class="bg" src="https://i.ringzle.com/file/20231128/6f0e543e592c4901a99bb8e8ae627d76.png"></image> -->
		<view class="lb bg" :style="{'top':mt+'px'}">
			<swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000" style="height: 320rpx;">
				<swiper-item class="swiper-items" v-for="item,index in lbList " @tap="toLbDetails(item.route)">
					<image class="image" style="width: 100%; height: 100%;" :src="item.path" mode="aspectFit"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="boxs">
			<view class="b_taps">
				<view :class="tidx==0?'active':''" @tap="changeTap(0)">
					<text>汽车</text>
					<image v-if="tidx==0"
						src="https://i.ringzle.com/file/20240103/91c599bf81634c69a5923f13837617dd.png"></image>
				</view>
				<view :class="tidx==1?'active':''" @tap="changeTap(1)">
					<text>电动车</text>
					<image v-if="tidx==1"
						src="https://i.ringzle.com/file/20240103/91c599bf81634c69a5923f13837617dd.png"></image>
				</view>
				<!-- <view :class="tidx==3?'active':''" @tap="changeTap(3)">
					<text>驿蓝租车</text>
					<image v-if="tidx==3"
						src="https://i.ringzle.com/file/20240103/91c599bf81634c69a5923f13837617dd.png"></image>
				</view> -->
				<view :class="tidx==2?'active':''" @tap="changeTap(2)">
					<text>包车</text>
					<image v-if="tidx==2"
						src="https://i.ringzle.com/file/20240103/91c599bf81634c69a5923f13837617dd.png"></image>
				</view>
			</view>
			<view class="b_car" v-if="tidx==0">
				<block v-if="carList.length>0">
					<view v-for="(car,index) in carList" :key="index" class="b_item" @tap="toFullOffer(car)">
						<image :src="car.pic"></image>
						<view class="bc_info">
							<view class="bci_top">
								<view class="bcit_name">{{car.name}}</view>
								<view class="bcit_bj">
									<text>{{car.quotationNumber}}个报价</text>
									<image
										src="https://i.ringzle.com/file/20231128/05b6218930fb49cc8fd6fdcdde6a86f9.png">
									</image>
								</view>
							</view>
							<view class="bci_pzs">
								<view>{{car.carPower}}</view>
								<view>{{categaryCfg[car.categary]}}</view>
								<view>{{driversTypeCfg[car.driversType]}}</view>
								<view>{{car.seat}}座</view>
							</view>
							<view class="bci_price">
								<text>￥{{car.price}}</text>
								<span>/天</span>
							</view>
							<view class="bci_tips">
								<image v-if="car.insureType==0"
									src="https://i.ringzle.com/file/20231128/44923c2a524846c2b37bcc02dac55d38.png">
								</image>
								<view class="bcit_box" v-if="car.takeDeliverType===0">上门取送</view>
								<view class="bcit_box" v-if="car.depositType>=0">{{depositTypeCfg[car.depositType]}}
								</view>
								<view class="bcit_box bb_dcyx" v-if="car.reverseImageType===0">倒车影像</view>
							</view>
						</view>
					</view>
				</block>
				<block v-else>
					<NoData />
				</block>
			</view>
			<view class="b_electrocar" v-if="tidx==1">
				<block v-if="electrocarList.length>0">
					<view v-for="(item,index) in electrocarList" :key="index" @tap="toTurn(item)">
						<view class="be_top">
							<view class="bet_name">{{item.corporateName}}</view>
							<view class="bet_num">
								<text>{{item.leasableNumber}}辆可租</text>
								<image src="https://i.ringzle.com/file/20231128/05b6218930fb49cc8fd6fdcdde6a86f9.png">
								</image>
							</view>
						</view>
						<view class="be_addr">
							<image src="https://i.ringzle.com/file/20231128/14ce31c27e374086aaf3d5f67c11db7b.png">
							</image>
							<text>{{item.position}}</text>
						</view>
						<view class="be_box b_item">
							<image :src="item.pic"></image>
							<view class="bc_info">
								<view class="bci_top">
									<view class="bcit_name">{{item.name}}</view>
								</view>
								<view class="bci_pzs">
									<view>{{item.electromobilePower}}</view>
									<view>{{item.endurance}} km</view>
								</view>
								<view class="bci_price">
									<text>￥{{item.price}}</text>
									<span>/天</span>
								</view>
								<view class="bci_tips">
									<image v-if="item.insureType==0"
										src="https://i.ringzle.com/file/20231128/44923c2a524846c2b37bcc02dac55d38.png">
									</image>
									<view class="bcit_box" v-if="item.depositType>=0">
										{{depositTypeCfg[item.depositType]}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
				<block v-else>
					<NoData />
				</block>
			</view>
			<view class="b_car" v-if="tidx==2">
				<block v-if="charteredbusList.length>0">
					<view v-for="(car,index) in charteredbusList" :key="index" class="b_item" @tap="toBcDetails(car)">
						<image :src="car.pic"></image>
						<view class="bc_info">
							<view class="bci_top">
								<view class="bcit_name">{{car.name}}</view>
							</view>
							<view class="bci_pzs">
								<view>{{car.carPower}}</view>
								<view>{{categaryCfg[car.categary]}}</view>
								<view>{{driversTypeCfg[car.driversType]}}</view>
								<view>{{car.seat}}座</view>
							</view>
							<view class="bci_price">
								<text>￥{{car.price}}</text>
								<span>/天</span>
							</view>
							<view class="bci_tips">
								<image v-if="car.insureType==0"
									src="https://i.ringzle.com/file/20231128/44923c2a524846c2b37bcc02dac55d38.png">
								</image>
								<view class="bcit_box" v-if="car.takeDeliverType===0">上门取送</view>
								<view class="bcit_box" v-if="car.depositType>=0">{{depositTypeCfg[car.depositType]}}
								</view>
								<view class="bcit_box bb_dcyx" v-if="car.reverseImageType===0">倒车影像</view>
							</view>
						</view>
					</view>
				</block>
				<block v-else>
					<NoData />
				</block>
			</view>
			<view class="yl_list" v-if="tidx==3">
				<block v-if="ylzcList.length>0">
					<view class="yl_card" v-for="(item,index) in ylzcList" :key="index">
						<image style="width: 162rpx;height: 162rpx;border-radius: 16rpx;" :src="item.photo"
							mode="aspectFill">
						</image>
						<view class="left">
							<view class="carNum">
								{{item.numberplate}}
							</view>
							<view class="driverInfo">
								<span>{{item.name}}</span>
								<u-line direction='col'></u-line>
								<span>{{item.driveAge}}</span>
								<u-line direction='col'></u-line>
								<span>{{item.orderVolume}}</span>
							</view>
							<view class="price">
								<span class="money">￥{{item.startingPrice}}</span>
								<span>/起步价</span>
							</view>
						</view>
						<view class="right">
							<span class="status"> {{item.type==0?'空闲中':'已接单'}}</span>
						</view>
					</view>

				</block>
				<block v-else>
					<NoData />
				</block>

			</view>
		</view>
		<view class="bottom" v-if="tidx==3">
			<view class="btn" @tap="orderWrite">
				预约用车
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				lbList: [{
					path: 'https://fsy.shengsi.gov.cn/file/20240730/fee69cfb365b493dbed52a224db65735.png'
				}],
				tidx: 0,
				carList: [],
				electrocarList: [],
				charteredbusList: [],
				ylzcList: [], //驿蓝租车
				categaryCfg: {
					0: '自动挡',
					1: '手动挡'
				},
				// driversTypeCfg: {
				// 	1: 'C1驾照',
				// 	2: 'B2驾照',
				// 	3: 'A2驾照',
				// 	4: 'A1驾照'
				// },
				driversTypeCfg: {
					1: 'C1驾照',
					2: 'C2驾照',
					3: 'B2驾照',
					4: 'A1驾照',
					5: 'A2驾照'
				},
				depositTypeCfg: {
					0: '芝麻免押金',
					1: '押金￥500',
					2: '押金￥1000',
					3: '押金￥1500',
					4: '押金￥2000'
				}
			}
		},
		onLoad() {
			this.getCarList();
			this.getLbList();

		},
		onShow() {
			// this.changeTap(0);
		},
		methods: {
			toLbDetails(url) {
				console.log(url);
				if (!url) return
				if (uni.getStorageSync('spid_old')) uni.removeStorageSync('spid_old');
				if (uni.getStorageSync('price_old')) uni.removeStorageSync('price_old');
				uni.navigateTo({
					url
				})
			},
			getLbList() {
				this.$api.get('/sys/isappletpic/queryBannerByType/8').then(res => {
					if (res.data.code === 0) {
						let list = res.data.data.bannerList.map(b => {
							return {
								path: b.path,
								route: b.linkUri
							}

						});
						if (list.length > 0) this.lbList = list;

						// if (res.data.data.bannerList.length > 0) this.lbList = res.data.data.bannerList;
					}
				})
			},
			changeTap(idx) {
				if (this.tidx === idx) return
				// this.tidx = idx == 2 ? this.tidx : idx;
				this.tidx = idx;
				if (idx == 0) this.getCarList();
				else if (idx == 1) this.getElectrocarList();
				else if (idx == 2) {
					// uni.navigateTo({
					// 	url: '/pagesIndex/rentalCar/charteredbus'
					// })
					this.getCharteredbusList();
				} else if (idx == 3) {
					// uni.navigateTo({
					// 	url: '/pagesTaxi/Taxi/index'
					// })
					this.getYlzcList();
				}
			},
			getCarList() {
				this.$api.get('/travel/travel/rentalcarcar/car').then(res => {
					if (res.data.code === 0) {
						this.carList = res.data.data;
					} else this.$showModal(res.data.msg);
				})
			},
			getElectrocarList() {
				this.$api.get('/travel/travel/rentalcarelectromobile/electromobile').then(res => {
					if (res.data.code === 0) {
						this.electrocarList = res.data.data;
						this.electrocarList.forEach(e => {
							for (let ee in e) {
								e[ee] = e[ee] != null ? e[ee] : ''
							}
						})
					} else this.$showModal(res.data.msg);
				})
			},
			getCharteredbusList() {
				this.$api.get('/travel/travel/rentalcarengagecar/rentalcarengagecar').then(res => {
					if (res.data.code === 0) {
						this.charteredbusList = res.data.data;
					} else this.$showModal(res.data.msg);
				})
			},
			toBcDetails(item) {
				uni.navigateTo({
					url: '/pagesIndex/rentalCar/storeInfo?companyId=' + item.rentalcarCompanyId + "&carType=" +
						item.carType + "&name=" + item.name + "&numberplate=" + item.numberplate + "&type=3" //3 包车
				})
			},
			getYlzcList() {
				this.$api.get('/travel/travel/rentalcarylbmcar/whole').then(res => {
					if (res.data.code == 0) {
						this.ylzcList = res.data.data;
					} else this.$showModal(res.data.msg);
				})
			},
			orderWrite() {
				uni.navigateTo({
					url: "/pagesTaxi/Taxi/orderWrite"
				})
			},
			toFullOffer(item) {
				uni.navigateTo({
					url: '/pagesIndex/rentalCar/fullOffer?item=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			toTurn(item) {
				uni.navigateTo({
					url: '/pagesIndex/rentalCar/storeInfo?companyId=' + item.rentalcarCompanyId + "&type=2" //2 电动车
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page {
		background: #F5F8FA;
		padding-bottom: 20rpx;

		.bg {
			width: 100%;
			height: 320rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
		}

		.boxs {
			width: calc(100% - 48rpx);
			margin: 240rpx 24rpx 0;

			.b_taps {
				display: flex;
				width: 100%;
				height: 80rpx;

				&>view {
					width: calc(100% / 3);
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					background: rgba(255, 255, 255, 0.7);

					&:first-child {
						border-radius: 22rpx 0 0 0;
					}

					&:last-child {
						border-radius: 0 22rpx 0 0;
					}

					text {
						font-size: 30rpx;
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						color: #5A607C;
						position: relative;
						z-index: 2;
					}

					image {
						position: absolute;
						width: 100%;
						height: 89rpx;
						left: 0;
						bottom: 0;
						z-index: 1;
					}

					&.active {
						&::after {
							content: '';
							width: 64rpx;
							height: 6rpx;
							background: #007A69;
							border-radius: 2rpx;
							position: absolute;
							left: 50%;
							margin-left: -32rpx;
							bottom: 4rpx;
							z-index: 3;
						}

						text {
							font-size: 36rpx;
							color: #007A69;
						}
					}
				}
			}

			.b_item {
				width: 100%;
				padding: 24rpx 24rpx 8rpx;
				box-sizing: border-box;
				border-radius: 16rpx;
				background: #fff;
				display: flex;
				margin-top: 20rpx;

				&:first-child {
					margin-top: 0;
				}

				&>image {
					width: 162rpx;
					height: 162rpx;
				}

				.bc_info {
					width: calc(100% - 162rpx);
					padding-left: 24rpx;
					box-sizing: border-box;

					.bci_top {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.bcit_name {
							font-size: 32rpx;
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							color: #333333;
						}

						.bcit_bj {
							display: flex;
							align-items: center;

							text {
								font-size: 24rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								color: #5A607C;
							}

							image {
								width: 24rpx;
								height: 24rpx;
							}
						}
					}

					.bci_pzs {
						margin-top: 24rpx;
						display: flex;
						align-items: center;

						&>view {
							font-size: 24rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #35465B;
							padding: 0 10rpx;
							position: relative;

							&:first-child {
								padding-left: 0;
							}

							&::after {
								content: "";
								width: 1rpx;
								height: 80%;
								background: #999999;
								position: absolute;
								right: 0;
								top: 10%;
							}

							&:last-child::after {
								width: 0;
							}
						}
					}

					.bci_price {
						margin-top: 30rpx;

						text {
							font-size: 40rpx;
							font-family: DINAlternate, DINAlternate;
							font-weight: bold;
							color: #FD3939;
						}

						span {
							font-size: 24rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #FF4141;
						}
					}

					.bci_tips {
						margin-top: 26rpx;
						overflow: hidden;

						&>image {
							width: 112rpx;
							height: 32rpx;
							margin-right: 10rpx;
							float: left;
						}

						.bcit_box {
							height: 32rpx;
							padding: 0 8rpx;
							border-radius: 4rpx;
							border: 1rpx solid #DCC7AB;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 20rpx;
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							color: #C9A771;
							float: left;
							margin-right: 9rpx;
							margin-bottom: 16rpx;

							&.bb_dcyx {
								margin-right: 0;
							}
						}
					}
				}
			}

			.b_electrocar {
				&>view {
					width: 100%;
					padding: 36rpx 24rpx 24rpx;
					box-sizing: border-box;
					border-radius: 16rpx;
					background: #fff;
					display: flex;
					flex-direction: column;
					margin-top: 20rpx;

					&:first-child {
						margin-top: 0;
					}

					.be_top {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.bet_name {
							font-size: 32rpx;
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							color: #35465B;
						}

						.bet_num {
							display: flex;
							align-items: center;

							text {
								font-size: 24rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								color: #5A607C;
							}

							image {
								width: 24rpx;
								height: 24rpx;
							}
						}
					}

					.be_addr {
						margin-top: 24rpx;
						display: flex;
						align-items: center;

						image {
							width: 24rpx;
							height: 24rpx;
						}

						text {
							font-size: 26rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #879099;
							margin-left: 10rpx;
						}
					}

					.be_box {
						margin-top: 42rpx;
						padding: 0;

						.bcit_box {
							margin-bottom: 0 !important;
						}
					}
				}
			}

			.yl_list {
				display: flex;
				flex-direction: column;

				.yl_card {
					background: #fff;
					border-radius: 16rpx;
					margin-bottom: 20rpx;
					padding: 16rpx;
					display: flex;
					flex-direction: row;

					.left {
						width: 44%;
						color: #797979;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 22rpx;
						padding: 10rpx 0;

						.carNum {
							font-weight: 700;
							font-size: 34rpx;
							color: black;
						}

						.driverInfo {
							display: flex;
							width: 94%;
							flex-direction: row;
							justify-content: space-between;
						}

						.price {
							flex-direction: row;
							display: flex;
							justify-content: flex-start;
							align-items: center;

							.money {
								color: red;
								font-size: 30rpx;
							}
						}
					}

					.right {
						margin: 30rpx 0 0 72rpx;

						.status {
							padding: 9rpx 15rpx;
							color: #33AFFC;
							border: 1rpx solid #33AFFC;
							border-radius: 27rpx;
						}
					}



				}


			}
		}

		.bottom {
			background: #fff;
			position: absolute;
			height: 10%;
			display: flex;
			width: 100%;
			bottom: 0;
			align-items: center;
			justify-content: center;

			.btn {
				background: #33AFFC;
				width: 70%;
				height: 80rpx;
				border-radius: 81rpx;
				color: #fff;
				line-height: 80rpx;
				text-align: center;
				margin: auto;

			}
		}
	}
</style>